<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="Viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <title>Title</title>
    <style type="text/css">
      [v-cloak]{
        display: none;
      }
      fieldset{
          width: 600px;
          border: 1px solid cornflowerblue;
          margin: 0;
          margin-bottom: 10px;
      }
      fieldset input{
          width: 200px;
          height: 30px;
          margin: 10px 0;
      }
      fieldset button{
          width: 100px;
          height: 30px;
          margin-top: 10px;
      }
      table{
          width: 620px;
          border: 1px solid red;
          text-align: center;
      }
      thead{
          background-color: cornflowerblue ;
      }
    </style>
</head>
<div id="app" class="container" v-cloak>
    <!--第一部分-->
    <h3>学生录入系统</h3>
    <div>
        <label for="username">学号:</label>
        <input type="text" id="id" class="form-control" placeholder="输入学号" v-model="newStudent.id">
    </div>
    <div>
        <label for="username">姓名:</label>
        <input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="newStudent.name">
    </div>
    <div>
        <label for="">成绩:</label>
        <input type="text" name="" id="" class="form-control" value="" placeholder="请输入成绩" v-model="newStudent.grade">
    </div>
<!--    <div>-->
<!--        <span>性别：</span>-->
<!--        <select name=""  v-model="newStudent.sex" class="sel">-->
<!--            <option value="男">男</option>-->
<!--            <option value="女">女</option>-->
<!--        </select>-->
<!--    </div>-->
    <button @click="creatNewstudent()" class="btn btn-danger">创建新用户</button><br><br>
    <!----------------------------搜索-->
    按学号搜索:<input type="text" v-model="search"/>
    <button @click="filteredStudents()" class="btn btn-primary">搜索</button>
    <!--第二部分-->
    <hr/>
    <h3 class="h3 text-info">用户信息表</h3>
        <button @click="avg()">显示所有学生的平均成绩</button>
        <button @click="sortedStudents()">按成绩升序显示学生信息</button>
    <table class="table table-bordered table-hover">
        <thead>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>成绩</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(student,index) in students">
            <td>{{student.id}}</td>
            <td>{{student.name}}</td>
            <td>{{student.grade}}</td>
            <td><button @click="deleteStudent(index)" class="btn btn-primary">删除</button> </td>
        </tr>
        </tbody>
    </table>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            students:[
                {id:'001',name:"张三",grade:60},
                {id:'002',name:"李四",grade:75},
                {id:'003',name:"王五",grade:72},
                {id:'004',name:"赵四",grade:68},
            ],
            newStudent:{id:"",name:"",grade:0},
            search:""
        },
        methods:{
            creatNewstudent(){
                //alert(0)
                //姓名不能为空
                if(this.newStudent.id===""){
                    alert("学号不能为空");
                    return;
                }
                if(this.newStudent.name===""){
                    alert("姓名不能为空");
                    return;
                }
                //成绩不能小于10
                if (this.newStudent.grade<0){
                    alert("成绩不能小于0");
                    return;
                }
                //向数组添加一个新纪录
                this.students.unshift(this.newStudent);
                //清空数据
                this.newStudent={id:"",name:"",grade:0}
            },
            //删除一条学生记录
            deleteStudent(index){
                this.students.splice(index,1);
            },
            filteredStudents(){
                search=this.search;
                //alert(search);
                vm.students=this.students.filter(function (item) {
                    return item.id.match(search);
                });
            },
            sortedStudents(){
                this.students.sort(function (a,b) {
                    return a.grade>b.grade;
                })
            },
        },
        computed:{
            sum(){
                var sum=0;
                for(var i=0;i<this.students.length;i++){
                    sum+=this.students[i].grade;
                }
                return sum;
            },
            avg(){
                alert('平均成绩为：'+this.sum/this.students.length);
            },
        }
    })
</script>
<body>

</body>
</html>